.header {
  @apply sticky left-0 right-0 z-10 p-12;

  @screen phone {
    & {
      @apply p-4;
    }
  }

  backdrop-filter: blur(5px);
  border-radius: 0 0 12px 12px;
  top: -1rem;
  display: flex;
  justify-content: space-between;

  & .title {
    @apply flex items-center select-none;

    font-size: 1.73rem;
  }
}

.main {
  @apply p-12;

  padding-top: 0;

  @screen phone {
    @apply p-4;
  }
}

.buttons {
  @apply fixed right-0 bottom-0;

  margin-bottom: 2rem;
  margin-right: 2rem;

  & > button,
  & > a {
    @apply h-12 w-12 flex items-center justify-center shadow-2xl relative;
  }

  & > button:first-child,
  & > a:first-child {
    @apply mb-2;
  }

  a > button {
    @apply h-full w-full;
  }
}

.header-actions {
  @apply right-0 mr-12 phone:pr-4 top-0 bottom-0 flex items-center relative;

  & > button,
  & > a {
    @apply h-12 w-12 flex items-center justify-center shadow-2xl;
  }

  a > button {
    @apply h-full w-full;
  }
}
